<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            text-align: center;
        }
        .p1{
            text-indent: 6em;
        }
        .p2{
            text-indent: 4em;
        }
        .div1{
            width: 800px;
            height: 100px;
            background-color: #f0f0f0;
            border-left: 2px solid grey;
            line-height: 50px;
        }
        .div2{
            width: 750px;
            height: 50px;
            border: 1px solid grey;
            line-height: 50px;
        }
        .span1{
            display: inline-block;
            width: 28px;
            height: 200px;
            background-color: #f0f0f0;
            text-align: center;
        }
        .div3{
            border: 1px solid red;
        }
        .span2{
            display: inline-block;
            border: 1px solid blanchedalmond;
        }
    </style>
</head>
<body>
<h1>文本样式高级控制</h1>
<p class="p1">网页设计中，文本样式的精细控制是提升用户体验的关键因素。通过CSS我们可以实现各种专业</p>
<p class="p2">的排版效果。</p>
<p>从基本的字体、字号设置到复杂的首字下沉、文本阴影等效果，CSS提供了丰富的属性来控制文本表现。</p>
<div class="div1">好的排版是无声的音乐，它不引人注目却让阅读变得轻松愉悦。在数字时代，CSS是我们实现优美排版的强大工具。</div>
<br>
<div class="div2">这是一个非常长的文本内容，当它超出容器宽度时会自动显示为省略号，而不是换行或者溢出容器。</div>
<br>
<div class="div3">
    <span class="span2">通过组合使用各种CSS属性，我们可以创造出既美观又实用的文本布局，满足不同场景下的设计需求。</span>
    <span class="span1">竖向排列的文字效果</span>
</div>




</body>
</html>